<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>房间管理</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <link rel="shortcut icon" href="/favicon.ico">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm.min.css">
    <link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm-extend.min.css">

    <style>
        .bodyDiv{
        }
        .room_code{
            margin-right: 10.5rem;
        }
        .card-header span{
            font-size: 0.75rem;
        }
    </style>
</head>
<body>
<div class="page-group">
    <div class="page page-current">
        <header class="bar bar-nav">
            <a class="icon icon-left pull-left"></a>
            <a class="icon icon-refresh pull-right"></a>
            <h1 class="title">房间管理</h1>
        </header>
        <div class="bar bar-header-secondary">
            <div class="searchbar">
                <a class="searchbar-cancel">取消</a>
                <div class="search-input">
                    <label class="icon icon-search" for="search"></label>
                    <input type="search" id='search' placeholder='输入房屋所属区域'/>
                </div>
            </div>
        </div>
        <div class="content infinite-scroll infinite-scroll-bottom" data-distance="100">
            <div class="bodyDiv">

            </div>
            <!-- 加载提示符 -->
            <div class="infinite-scroll-preloader" style="display: none">
                <div class="preloader"></div>
            </div>
        </div>


    </div>
</div>

<!--添加信息模板-->
<!--<script id="tpl_roomInformation" type="text/html">-->
    <!--<% for(var i in roomInformation) {%>-->
    <!--<div class="card">-->
        <!--<div class="card-header"><span>房屋编码：</span><span class="room_code">roomInformation[i]</span></div>-->
        <!--<div class="card-content">-->
            <!--<div class="card-content-inner">-->
                <!--<p>房屋地址：<span>庐阳区飞扬路胜果电商</span></p>-->
                <!--<p>房间数量：<span>5</span></p>-->
                <!--<p>入住房间：<span>3</span></p>-->
                <!--<p>房间描述：<span>坐北朝南，空调，WiFi，热水器，厨房均有提供</span></p>-->
            <!--</div>-->
        <!--</div>-->
        <!--<div class="card-footer">-->
            <!--<a herf="#">订单管理</a>-->
            <!--<a herf="#">入住登记</a>-->
        <!--</div>-->
    <!--</div>-->
    <!--<% } %>-->
<!--</script>-->
<script type='text/javascript' src='//g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script>
<script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm.min.js' charset='utf-8'></script>
<script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm-extend.min.js' charset='utf-8'></script>
<!--<script src="__PUBLIC__/js/jquery-1.10.2.min.js"></script>-->
<!--<script src="__PUBLIC__/js/template-web.js"></script>-->
<!--<script src="__PUBLIC__/js/jquery.cookie.js"></script>-->
<script>
    $.init();
    // 加载flag
    $(document).ready(function(){
        var loading = false;
        // 最多可加载的条目
        var maxItems = null;
        //当前加载的页码
        var page = 1;
        // 每次加载添加多少条目
        var itemsPerLoad = 3;
        // 上次加载的序号
        var lastIndex = 1;
        //条件输入框取值
        var police_query ="";

        //获取数据总条数
        function getPageLimit() {
            $.ajax({
                type: "GET",
                data: {
                    account: 'think',
                    police_query:police_query,
                },
                url: "/index.php/index/room/getPageLimit",
                success: function (data) {
                    maxItems = data.data;
                }
            })
        }


        function addItems(number, lastIndex) {
            $.ajax({
                type: "GET",
                data: {
                    limit: number,
                    page: page,
                    account: 'think',
                    police_query:police_query,
                },
                url: "/index.php/index/room/select",
                success: function (data) {
                    // 生成新条目的HTML
                    var html = "";
                    for (var i in data.data) {
                        html = html + '<div class="card">'
                            + '<div class="card-header"><span>房屋编码：</span><span class="room_code">'+data.data[i].room_code+'</span></div>'
                            + '<div class="card-content">'
                            + '<div class="card-content-inner">'
                            + '<p>房屋地址：<span>'+data.data[i].room_address+'</span></p>'
                            + '<p>房间数量：<span>'+data.data[i].room_num+'</span></p>'
                            + '<p>入住房间：<span>'+data.data[i].sum+'</span></p>'
                            + '<p>房间描述：<span>'+data.data[i].room_detail+'</span></p>'
                            + '</div>'
                            + '</div>'
                            + '<div class="card-footer">'
                            + '<a href="#">订单管理</a>'
                            + '<a class="room_register" >入住登记</a>'
                            + '</div>'
                            + '</div>'
                    }
                    // 添加新条目
                    $(".bodyDiv").append(html);
                }
            });
        }

        // 注册'infinite'事件处理函数
        $(document).on('infinite', '.infinite-scroll-bottom',function() {
            // 如果正在加载，则退出
            if (loading) return;
            // 设置flag
            loading = true;
            //显示加载条
            $('.infinite-scroll-preloader').show();
            // 模拟1s的加载过程
            setTimeout(function() {
                // 重置加载flag
                loading = false;
                if (lastIndex >= maxItems) {
                    // 加载完毕，则注销无限加载事件，以防不必要的加载
                    $.detachInfiniteScroll($('.infinite-scroll'));
                    //page重置
                    page = 1;
                    // 删除加载提示符
                    $('.infinite-scroll-preloader').remove();
                    return;
                }
                //页数加一
                page =page +1;
                // 添加新条目
                addItems(itemsPerLoad, lastIndex);
                // 更新最后加载的序号
                lastIndex = $('.card').length;
                //容器发生改变,如果是js滚动，需要刷新滚动
                $.refreshScroller();
            }, 220);
        });

        //获取符合当前条件的数据总条数
        getPageLimit();
        //预先加载3条
        addItems(itemsPerLoad, 0);
        $("#search").keydown(function (e) {
            if (e.keyCode == 13) {
                police_query =$("#search").val();
                $(".bodyDiv").empty();
                getPageLimit();
                //预先加载3条
                addItems(itemsPerLoad, 0);
            }
        });
        $(document).on('click','.room_register',function () {
            var room_code = $(this).parent().parent().find("span.room_code").html();
            window.location.href='/index.php/api/index/room_register?room_code='+room_code;

        })

    });
</script>
</body>
</html>